<template>
	<view class="login-container">
		<!-- Logo部分 -->
		<view class="logo-section">
			<image src="@/static/public/logo.png" mode="aspectFit" class="logo"></image>
		</view>

		<!-- 登录按钮组 -->
		<view class="login-buttons">
			<view @click="wechatLogin" class="login-btn login-btn-wechat">微信授权登录</view>
			<view @click="phoneLogin" class="login-btn login-btn-phone">手机号码登录</view>
			<view @click="emailLogin" class="login-btn login-btn-email">邮箱登录</view>
		</view>

		<!-- 隐私政策选项 -->
		<view class="privacy-section">
			<u-radio-group v-model="privacyChecked">
				<image :src="privacyChecked ? '/static/public/checked.png' : '/static/public/unchecked.png'"
					mode="aspectFit" style="width: 32rpx; height: 32rpx;margin:2rpx 10rpx 0 0;"
					@click="privacyChecked = !privacyChecked" />
				<text class="privacy-text">阅读并同意</text>
				<text class="privacy-link" @click="openPrivacyPolicy">《平台隐私政策》</text>
				<!-- <text class="privacy-text">与</text>
				<text class="privacy-link" @click="openSecurityAgreement">《安全协议》</text> -->
			</u-radio-group>
		</view>

		<!-- 注册链接 -->
		<view class="register-link">
			<text class="divider-text" @click="goToRegister">去注册</text>
		</view>
	</view>
</template>

<script>
	import { toRichWeb } from '@/utils/system.js'
	export default {
		name: 'LoginPage',
		data() {
			return {
				privacyChecked: false
			}
		},
		methods: {
			wechatLogin() {
				// 微信登录逻辑
				if (!this.privacyChecked) {
					uni.$u.toast('请先同意隐私政策')
					return
				}
				
				// #ifdef MP-WEIXIN
				// 微信小程序平台
				this.handleWechatAuth(34, 'default'); 
				// #endif

				// #ifdef APP-PLUS
				// App平台
				this.handleWechatAuth(32, 'app');
				// #endif

				// #ifdef H5
				// H5平台(如果需要)
				uni.$u.toast('H5平台暂不支持微信登录')
				// #endif
			},
			
			// 处理微信授权登录
			handleWechatAuth(socialType, state) {
				if (!this.privacyChecked) {
					uni.$u.toast('请先同意隐私政策')
					return
				}
				uni.login({
					provider: 'weixin',
					onlyAuthorize: true,
					success: (loginRes) => {
						// 获取授权code，小程序和App获取方式不同
						const code = loginRes.code || 
							(loginRes.authResult && loginRes.authResult.code ? 
							loginRes.authResult.code : '');
						
						if (!code) {
							const errMsg = loginRes.errMsg || JSON.stringify(loginRes);
							uni.$u.toast('微信登录失败: ' + errMsg)
						}
						
						// 调用后端接口
						this.$http_api.wechatLogin({
							type: socialType,
							code: code,
							state: state
						}).then(res => {
							this.handleLoginSuccess(res)
						})
					},
					fail: (err) => {
						uni.showModal({ title: '取消授权' })
					}
				});
			},
			
			// 处理登录成功
			handleLoginSuccess(data) {
				this.$http_api.userInfo({}).then((res)=>{
					this.$store.dispatch('userLoginAction', res)
					uni.setStorageSync('token', data.accessToken);
					uni.$emit('loginSuccessEvent');
					console.log("登录成功");
					setTimeout(() => {
						uni.switchTab({ url: '/pages/index/index' })
					}, 1500)
				})
			},
			
			// 手机登录逻辑
			phoneLogin() {
				if (!this.privacyChecked) {
					uni.$u.toast('请先同意隐私政策')
					return
				}
				uni.navigateTo({
					url: '/pages/public/phoneLogin'
				})
			},
			// 邮箱登录逻辑
			emailLogin() {
				if (!this.privacyChecked) {
					uni.$u.toast('请先同意隐私政策')
					return
				}
				uni.navigateTo({
					url: '/pages/public/emailLogin'
				})
			},
			openPrivacyPolicy() {
				// 打开隐私政策
				toRichWeb(1)
			},
			openSecurityAgreement() {
				// 打开安全协议
				toRichWeb(2)
			},
			goToRegister() {
				// 跳转到注册页面
				uni.navigateTo({
					url: '/pages/public/register'
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.login-container {
		padding: 40rpx;
		display: flex;
		min-height: 100vh;
		flex-direction: column;
		align-items: center;
		background-color: #ffffff
	}

	.logo-section {
		margin: 120rpx 0;

		.logo {
			width: 240rpx;
			height: 240rpx;
		}
	}

	.login-buttons {
		width: 100%;
		padding: 0 30rpx;
		display: flex;
		flex-direction: column;
		align-items: center;

		.login-btn {
			margin-bottom: 30rpx;
			max-width: 554rpx;
			width: 100%;
			height: 95rpx;
			line-height: 95rpx;
			border-radius: 69rpx 69rpx 69rpx 69rpx;
			font-size: 30rpx;
			text-align: center;
			color: #FFFFFF;

			&.login-btn-wechat {
				background: #11CC76;
			}

			&.login-btn-phone {
				background: #2993FF;
			}

			&.login-btn-email {
				background: #FF772C;
			}

		}
	}

	.privacy-section {
		width: 100%;
		margin: 60rpx 0;
		padding: 0 30rpx;
		display: flex;
		flex-direction: column;
		align-items: center;

		.privacy-text {
			font-size: 26rpx;
			color: #CED5E2;
			margin: 0 4rpx;
		}

		.privacy-link {
			font-size: 26rpx;
			color: #42E0A2;
		}
	}

	.register-link {
		position: fixed;
		bottom: 100rpx;
		width: 100%;
		left: 0;
		text-align: center;

		.divider-text {
			position: relative;
			color: #666;
			font-size: 32rpx;
			padding: 0 30rpx;

			&::before,
			&::after {
				content: '';
				position: absolute;
				top: 50%;
				width: 200rpx;
				height: 2rpx;
				background-color: #ccc;
			}

			&::before {
				right: 100%;
			}

			&::after {
				left: 100%;
			}
		}
	}
</style>